<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>商品管理</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
		<script src="../js/jquery.min.js"></script>
		<script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style type="text/css">
    	html{
    		padding: 10px;
    	}
    </style>
</head>
<body class="hold-transition skin-red sidebar-mini" >
    <div class="box-header with-border">
        <h3 class="box-title" style="border-bottom: 2px solid #bbb;">商品列表</h3>
    </div>
    <div class="box-body">
    <!-- 数据表格 -->
        <div class="table-box">
        <!--工具栏-->
            <div class="pull-left">
                <div class="form-group form-inline">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#editModal">新增</button>           
                        <button type="button" class="btn btn-default" id="delete">删除</button>
                        <input type="button" class="btn btn-default" value="刷新" onclick="location.reload()">
                        <button type="button" id="delete_btn" class="btn btn-warning" style="display: none;">确定删除</button>
                    </div>
                </div>
            </div>
            <div class="box-tools pull-right">  
                <div class="has-feedback">
                	商品名称：<input style="height: 30px;margin-bottom:0;">
					<button class="btn btn-default" >查询</button>                                    
                </div>
            </div>
        <!--工具栏/-->
	<!--数据列表-->
			<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			    <thead>
			        <tr>
			            <th class="delete" id="all" style="display: none;" >
			                <input id="selall" type="checkbox" class="icheckbox_square-blue">
			            </th> 
						<th class="sorting_asc">商品ID</th>
						<th class="sorting">商品名称</th>
						<th class="sorting">商品价格</th>
						<th class="sorting">一级分类</th>
						<th class="sorting">二级分类</th>
						<th class="sorting">商品描述</th>									     						
					    <th class="text-center">操作</th>
			        </tr>
			    </thead>
			    <tbody>
			        <tr>
			            <td class="delete" style="display: none;"><input class="delete_check" type="checkbox"></td>			                              
				        <td>1</td>
						<td>华为Mete8</td>
						<td>3020</td>
						<td>数码产品</td>
						<td>手机</td>
		                <td>		                                  
		                    <span>尽享高帧率</span>
		                </td>		                                  
		                <td class="text-center">                                          
		                    <button type="button" class="btn bg-olive btn-xs" >下架</button>                  
		                </td>
			        </tr>
			    </tbody>
			</table>
			<!--数据列表/--> 
			<ul class="pagination" style="float: right;">
				<li><a href="#">&laquo;</a></li>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">&raquo;</a></li>
				<li><a href="#">50</a></li>
			</ul>	 
        </div>
        <!-- 数据表格 /-->
    </div>
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">新增商品</h3>
			</div>
			<div class="modal-body">	
				<table class="table table-bordered table-striped">
					<tr>
			      		<td>商品分类</td>
			      		<td>
			      			<div class="btn-group">
								<button type="button" class="btn btn-primary dropdown-toggle" 
										data-toggle="dropdown">
									父类别<span class="caret"></span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">功能</a></li>
									<li><a href="#">另一个功能</a></li>
									<li><a href="#">其他</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button type="button" class="btn btn-primary dropdown-toggle" 
										data-toggle="dropdown">
									子类别<span class="caret"></span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">功能</a></li>
									<li><a href="#">另一个功能</a></li>
									<li><a href="#">其他</a></li>
								</ul>
							</div>
			      		</td>
			      	</tr>
			      	<tr>
			      		<td>商品名称</td>
			      		<td><input  class="form-control" placeholder="商品名称">  </td>
			      	</tr>
			      	<tr>
			      		<td>商品价格</td>
			      		<td>	      		
			      			<input select2 config="options['type_template']" placeholder="商品价格" class="form-control" type="text"/>
			      		</td>		      		      		
			      	</tr>	
			      	<tr>
			      		<td>商品描述</td>
			      		<td>	      		
			      			<input select2 config="options['type_template']" placeholder="商品描述" class="form-control" type="text"/>
			      		</td>		      		      		
			      	</tr>
			      	<tr>
			      		<td>商品主图</td>
			      		<td>	      		
			      			<input type="file" placeholder="商品主图" style="border: 2px; border-radius: 5px;background: #337AB7;"/>			      			
			      		</td>
			      	</tr>	
			      	<tr>
			      		<td>商品副图</td>
			      		<td>	      		
			      			<input type="file" placeholder="商品主图" style="border: 2px; border-radius: 5px;background: #337AB7;"/>			      			
			      		</td>
			      	</tr>	
			      	<tr>
			      		<td>商品副图</td>
			      		<td>	      		
			      			<input type="file" placeholder="商品主图" style="border: 2px; border-radius: 5px;background: #337AB7;"/>			      			
			      		</td>
			      	</tr>	
			      	<tr>
			      		<td>商品副图</td>
			      		<td>	      		
			      			<input type="file" placeholder="商品主图" style="border: 2px; border-radius: 5px;background: #337AB7;"/>			      			
			      		</td>
			      	</tr>	
				 </table>				
				
			</div>
			<div class="modal-footer">						
				<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		  	</div>
	</div>
	</div>
</body>
<script type="text/javascript">
	$(function(){
		$('#delete').click(function(){
			$('.delete').css("display","block");
			$('#delete_btn').css("display","block");
		});
		$('#delete_btn').click(function(){
			
			$('.delete').css("display","none");
			$('#delete_btn').css("display","none");
		});
		$('#selall').click(function(){
			if($(this).prop('checked'))
				$('.delete_check').prop("checked",true);
			else
				$('.delete_check').prop("checked",false);
		});
	});
</script>
</html>